import logo from './logo.svg';
import './App.css';
//导入组件
import Coma from './ComA'
import Comstate from './ComState'
import Userinfo from './Userinfo'

function App() {
  let name = 'Ma baoguo';
  let age = 70;
  let hasWude = true;
  let zhaoshi = [1,2,3,4,5];
  let color = 'pink'
  let style1 = {
    background: 'lightblue',
    color: 'red'
  }
  return (
    <div className="App">
      <Coma></Coma>
      <Comstate></Comstate>
     
      <Userinfo age={18} name="Tom"></Userinfo>
     
      {/* 修改标签内容:变量、计算、表达式*/}
      {/* 修改标签属性:去掉双引号,加上花括号 */}
      {/* jsx的特点:允许js和html混写,js代码用花括号操作,html用尖括号包裹 */}
      {/* class的处理:html中的class要换成className,js中的不变 */}
      {/* 对象不能直接输出,数组可以直接输出 */}
      <p>我是{name},今年{age}岁了</p>
      {/* 条件渲染 */}
      {
        (function() {
          if (!hasWude) {
            //加上括号,避免在每一行的末尾自动添加分号
            return (<p>我是讲武德的马老师</p>)
          }else{
            return(<mark>我是不讲武德的年轻人</mark>)
          }
        })()
      }
      {/* 循环渲染 */}
      {
        zhaoshi.map(item => {
          //key和vue中的key作用相同,都是为了更加高效的更新虚拟dom,虚拟dom就是js的对象
          return(<button key={item*2}>第{item*2}页</button>)
        })
      }
      <hr />
      <button className="btn1">按钮1</button>
      <button className="btn2">按钮2</button>
      <hr />
      <div style={{width:'100px',height:'100px',background:'lightyellow',color:color}}>哈哈哈</div>
      <div style={style1}>芜湖起飞</div>
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" name={name}/>
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;
